<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<jsp:include page="/common/front/head.jsp" flush="true"/>
                <div class="showcontentlist" style="max-width: 1606px;width:90%;" align="left">
                	
				</div>
				<div style="position: relative;float: left;width:100%;margin: 0px;">
					<div id="loadstatus" class="content mdl-shadow--2dp mdl-navigation__link" align="center" style="width: 90%;color:#ff4081;margin:16px;height:40px;background: #fff;font-size: 24px;line-height: 40px;">
						<i style='font-size: 30px;' class='material-icons rotate_effect'>&#xe86a;</i> 正在加载！请稍后。。。
					</div>
				</div>
				<script type="text/javascript">
                	
                	var arr = new Array();
                	var lastPage = null;
                	/* 获取列表  */
                	function findfileList(postdata){
                		var flag = false;
                		postdata.tagid='${searchtitle}';
                		$.ajax({
                			 url: "article/findarticleListbytag",
                			 async: false,
                			 data: postdata,
                			 success : function(data){
		                		var json = eval(data);
		                		lastPage = json;
					        	Array.prototype.push.apply(arr, json.list);//将获取的列表添加到数组
					        	flag = true;
                			 }
                		});
                		return flag;
                	}
                	/* 根据参数渲染列表 */
                	function showcontentlist(arrs,colnum,colwidth){
                		var showcontentlistcolhtml = "";
                		for (var j = 0; j < colnum; j++) {
                			showcontentlistcolhtml += "<div class='showcontentlistcol' style='width:calc("+(colwidth-2)+"%);'></div>";
						}
                		var showcontentlistscroll =  $(".layoutcontent").scrollTop();//记录滚动条位置
                		$(".showcontentlist").html(showcontentlistcolhtml);//设置列
                		showcontentlistadd(arrs);//设置元素
                		$(".layoutcontent").scrollTop(showcontentlistscroll);//设置滚动条位置
                	}
                	/* 根据数据成列表 */
                	function showcontentlistadd(arrs){
                		for (var i = 0; i < arrs.length; i++) {
							var ar = arrs[i];
	                		var lower = getloweroflist($(".showcontentlistcol"));
	                		
	                		var tags = "";
	                		for(var j=0;j<ar.tagList.length;j++){
	                			tags += '<a href=\'tag/'+ar.tagList[j].id+'/'+ar.tagList[j].name+'\'  style="background:rgb(238, 238, 238);" class="mdl-button mdl-js-button mdl-js-ripple-effect">'+ar.tagList[j].name+'</a>';
	                		}
	                		var category = "<div style='position: relative;float: right;'><i style='float: left;font-size: 18px;padding-right: 5px;' class=\"material-icons\">&#xE1BD;</i><a style='text-decoration: none;' href=\"category/"+ar.categoryList[0].id+"/"+ar.categoryList[0].name+"\">"+ar.categoryList[0].name+"</a></div>";
	                		var div = $(["<div class=\"mdl-card on-the-road-again mdl-shadow--2dp\" style='margin-bottom: 24px;width:100%;border-radius: 0px;/'>",
	        	                		 "    <div onclick='window.location.href=basePath+\"article/content/"+ar.id+"\"' class=\"mdl-card__media mdl-color-text--grey-50\" style='background-image: url("+ar.topimg.replace("~~fileDomainName~~",fileDomainName)+");cursor: pointer;'>",
	        	                		 "		   <a class=\"mdl-navigation__link articleclicknum\"><i class=\"material-icons\">&#xE8F4;</i>&nbsp&nbsp"+ar.clicknum+"</a> ",
	        	                		 "         <h4 class='mdl-navigation__link articletitle'><a  href=\"article/content/"+ar.id+"\">"+ar.title+"&nbsp&nbsp<i class='material-icons'>&#x"
	        	                		 			+(ar.type==1?'e870':ar.type==2?'e8a7':'e878')+";</i></a></h4>",
	        	                		 "    </div>",
	        	                		 "    <div class=\"articletag mdl-card__supporting-text\">",
	        	                		 "		<i style='float: left;font-size: 18px;padding-right: 5px;' class=\"material-icons\">&#xE89A;</i>"+tags+category+"</div>",
	        	                		 "	  <hr style='margin: 0;border-top: 1px solid rgba(0,0,0,.1);'>",
	        	                		 "    <div class=\"mdl-color-text--grey-600 mdl-card__supporting-text\">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+ar.summary.replace('<','').replace('>','')+"</div>",
	        	                		 "	  <hr style='margin: 0;border-top: 1px solid rgba(0,0,0,.1);'>",
	        	                		 "    <div class=\"mdl-card__supporting-text meta mdl-color-text--grey-600\">",
	        	                		 "        <div class=\"minilogo\"></div>",
	        	                		 "        <div> <strong>"+ar.useraccount+"</strong>",
	        	                		 " 			<span style='position: relative;float: right;'>创建于："+new Date(ar.createtime).format('yyyy年MM月dd日 h时m分s秒')+"</span>",
	        	                		 "        </div>",
	        	                		 "    </div>",
	        	                		 "</div>"].join(""));
	                		$(lower).append(div);
						}
                	}
                	/* 获取高度最低的一列 */
                	function getloweroflist(elems){
                		var lower = elems[0];
                		for (var i = 1; i < elems.length; i++) {
							var elem = elems[i];
							if($(elem).height()<$(lower).height()){
								lower = elem;
							}
						}
                		return lower;
                	}
                	/* 根据窗口大小显示对应的列数 */
                	var windowwidth = null;
                	function showcontentlistrun(){
                		if((windowwidth==null||windowwidth<1500)&&$(window).width()>=1500){
            				showcontentlist(arr,3,33.333);
            				windowwidth = $(window).width();
            			}else if((windowwidth==null||windowwidth>=1500||windowwidth<1024)&&($(window).width()>=1024&&$(window).width()<1500)){
            				showcontentlist(arr,2,50);
            				windowwidth = $(window).width();
            			}else if((windowwidth==null||windowwidth>=1024)&&$(window).width()<1024){
            				showcontentlist(arr,1,100);
            				windowwidth = $(window).width();
            			}
                	}
                	$(function(){
                		findfileList({pageNum:"1"});
               			showcontentlistrun();
               			if(lastPage.pageNum>=lastPage.pages){
			        		$('#loadstatus').html('<i style=\'font-size: 30px;\' class=\'material-icons\'>&#xe862;</i>已加载完毕！就这么多了！');
			        	}
                		//窗口大小变更事件
                		$(window).resize(function() {
                			showcontentlistrun();
                		});
                	});
				    $(".layoutcontent").scroll(function(){  
				         var $this =$(this),  
				         viewH =$(this).height(),//可见高度  
				         contentH =$(this).get(0).scrollHeight,//内容高度  
				         scrollTop =$(this).scrollTop();//滚动高度  
				        //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容  
				        if(scrollTop/(contentH -viewH)>=1){ //到达底部100px时,加载新内容  
				        	if(lastPage.pageNum>=lastPage.pages){
				        		$('#loadstatus').html('<i style=\'font-size: 30px;\' class=\'material-icons\'>&#xe862;</i>已加载完毕！就这么多了！');
				        	}else{
				        		if(findfileList({pageNum:(lastPage.pageNum+1)})){
						        	showcontentlistadd(lastPage.list);
				        		}
				        	}
				        }  
				     });  
                	</script>
<jsp:include page="/common/front/foot.jsp" flush="true"/>